<template>
    <div class="input-content" >
        <div class="input-label" :style="dynStyle.labelStyle">
            <span v-if="props.required" style="color:red;">*</span>{{props.caption}}
        </div>
        <div class="input-el-content" :style="dynStyle.inputStyle">
            <el-input class="custom-el-input" 
                v-model="inputValue"
                v-bind="props"
                :suffix-icon="Search"
                @change="handleChange"/>
        </div>
        
    </div>
</template>
  
<script>

import { defineComponent, ref } from "vue";
// 继承的父组件
import EmapFormBaseItem from "./emap-form-base-item.vue";
// 引入表单子控件的管理类
import formItemManage from "../controlManage/formItemManage";
// 引入组件需要的属性
import { baseFormProps, baseStyleProps, textProps } from "../formItemMeta.js";
import { Search } from '@element-plus/icons-vue'

export default defineComponent({
    extends: EmapFormBaseItem, //继承
    name: "el-form-text",
    props: {
        ...textProps,
    },
    emits: [],
    setup(props, context) {
        // 控件绑定值
        let inputValue = ref();
        return {
            ...EmapFormBaseItem.setup(props, context),  // supur
            ...formItemManage(props, context),
            inputValue,
            Search
        };
    },
});
    
</script>


<style scoped>
@import url('./emap-form-item.css');

</style>